<!-- 考勤统计-部门 -->
<template>
	<view>
		<view class="tabsBarHeader">
			<scroll-view
				scroll-x="true"
				style="white-space: nowrap;"
				enhanced="true"
				show-scrollbar="false"
			>
				<view
					@click="handleTabsBarClick('2')"
					class="barHeaderItem"
					:class="punchCurrent == '2' ? 'tabsCurrentHeader' : ''"
				>
					个人统计
				</view>
				
				<view
					@click="handleTabsBarClick('1')"
					class="barHeaderItem"
					:class="punchCurrent == '1' ? 'tabsCurrentHeader' : ''"
				>
					公司统计
				</view>
				<view
					@click="handleTabsBarClick('3')"
					class="barHeaderItem"
					:class="punchCurrent == '3' ? 'tabsCurrentHeader' : ''"
				>
					每日统计
				</view>
				
			</scroll-view>
		</view>
		<view>
			<all-sat v-if="punchCurrent == '1'"></all-sat>
			<day-sta v-if="punchCurrent == '3'"></day-sta>
			<self-sta v-if="punchCurrent == '2'"></self-sta>
		</view>
	</view>
</template>

<script>
import AllSat from './components/allSat.vue';
import SelfSta from './components/selfSta.vue';
import DaySta from './components/daySta.vue';
export default {
	data() {
		return {
			selectTime: new Date().toISOString().slice(0, 7),
			reasons: '',
			token: '',
			member_id: '',
			company_id: '',
			classList: [],
			tableData: [],
			searchClassId: '',
			searchInfo: '',
			total: 0,
			pageSize: 10,
			currentPage: 1,
			status: 'more',
			punchCurrent: '2'
		};
	},
	onShow() {
		this.status = 'more';
		this.currentPage = 1;
		this.tableData = [];
	
	},
	onLoad(options) {
		this.token = uni.getStorageSync('btlh_process_token') || '';
		this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
		this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
	},
	components: {
		SelfSta,
		AllSat,
		DaySta,
	},

	methods: {
		handleTabsBarClick(val) {
			this.punchCurrent = val;
		}
	}
};
</script>

<style lang="scss">
// 导航栏头部点击部分
.tabsBarHeader {
	display: flex;
	background-color: #fff;
	justify-content: space-around;
	.barHeaderItem {
		// display: flex;
		display: inline-block;
		width: 33%;
		justify-content: center;
		align-items: center;
		height: 70rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		box-sizing: border-box;
		text-align: center;
		position: relative;
	}

	.tabsCurrentHeader {
		color: #128bf1;
	}

	.tabsCurrentHeader::before {
		content: '';
		height: 4rpx;
		width: 50%;
		background-color: #40a0f2;
		border-radius: 2rpx;
		position: absolute;
		bottom: 0;
		left: 25%;
	}
}
</style>
